<template>
    <div class="xblib">
        <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="(v, index) in arr" :key=index>
                <van-image :src="v.imgurl" />
                <p>{{ v.name }}</p>
                <span>{{ v.price }}</span>
            </van-grid-item>

        </van-grid>
    </div>
</template>

<script>
import service from "../../../../request/service.js";

export default {
    data() {
        return {
            list: {},
            arr: []


        }
    },
    mounted() {
        service({
            url: "api/pro/list",
            method: "get",
            params: {
                limitNum: 60
            }
        }).then(res => {
            res.data.data.forEach(element => {
                this.list = { imgurl: element.img1, name: element.proname, price: element.originprice }
                this.arr.push(this.list)
            });


        })
    }
}
</script>

<style scoped>
.xblib {
    width: 100%;
    display: flex;
    /* justify-content: space-around; */
    column-count: 2;
    column-gap: 0;
    margin-top: .625rem;
    margin-bottom: .3125rem;
    /* position: relative; */
}

p {
    font-size: .75rem;

}

span {
    color: red;
    /* position: absolute; */
    /* left: 10px;
    top: 40px; */
}
</style>